<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无法拒绝的表白</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
				box-sizing: border-box;
				font-family: "微软雅黑";
			}
			body,html{
				width: 100%;
				height: 100%;
			}
			body{
				background-color: mistyrose;
			}
			#box{
				width: 300px;
				height: 180px;
				background-color: lightcyan;
				position: absolute;
				left: 50%;
				transform: translateX(-50%) translateY(-50%);
		        top: 50%;
		        margin: auto;
			}
			#wy{
				width: 60px;
				height: 25px;
				margin-left: 210px;
				background-color: mistyrose;
			}
			#xz{
				width: 50px;
				height: 25px;
				margin-top: 120px;
				margin-right: -20px;
				float: left;
				background-color: mistyrose;
				
			}
			#bj{
				margin-left: 40px;
				margin-top: 5px;
				color: pink;
                font-family: "arial narrow";
                font-weight: bold;
				font-size: 24px;
			}
			#ca{
				width: 170px;
				height: 110px;
				margin-left: 35px;
				margin-top: 5px;
			}
			
		</style>
	</head>
	<body>
		<div class="box" id="box">
			<p id="bj">你愿意做我女朋友吗？</p>
			<img src="img/肖战 216.png" id="ca" />
			<button id="xz">愿意</button>
			<button id="wy">不愿意</button>
		</div>
		<script>
			window.onload = function(){
				var obox = document.getElementById("box");
				var owy = document.getElementById("wy");
				var oxz = document.getElementById("xz");
				oxz.onclick = function(){
					alert("很高兴你能够答应我的请求做我的女朋友，余生很长，陪伴是最长情的告白。余生请让我照顾你吧")
				}
				owy.onmouseover = function(){
					var x = document.body.clientHeight;
				    var z = document.body.clientWidth;
				    
				    var w =parseInt(Math.random()*(x-300));
				    var y =parseInt(Math.random()*(z-180));
				    obox.style.top = w+"px";
				    obox.style.left = y+"px";
				    console.log(x+":"+z);
				}
			}
		</script>
	</body>
</html>
